<template>
  <ArtTableFullScreen>
    <div id="table-full-screen">
      <el-card shadow="never" class="art-table-card">
        <ArtTableHeader
          :columnList="columnOptions"
          v-model:columns="columnChecks"
          @refresh="handleRefresh"
        >
          <template #left>
            <el-select
              style="width: 200px; margin-left: 10px"
              v-model="queryParams.status"
              @change="getPage"
            >
              <el-option
                v-for="status in statusList"
                :key="status.value"
                :label="status.label"
                :value="status.value"
              ></el-option>
            </el-select>
          </template>
        </ArtTableHeader>
        <art-table
          :data="tableData"
          :loading="loading"
          v-model:currentPage="queryParams.page"
          v-model:pageSize="queryParams.size"
          :total="total"
          @size-change="getPage"
          @current-change="getPage"
        >
          <template #default>
            <el-table-column v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
          </template>
        </art-table>
      </el-card>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { h } from 'vue'
  import { ElTag } from 'element-plus'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import artImagePreview from '@/components/image/ArtImagePreview.vue'
  import { OrderService } from '@/api/order'
  const tableData = ref<any>([])

  const total = ref(0)
  const loading = ref(false)
  const queryParams = reactive({
    page: 1,
    size: 10,
    status: 0 // 热量
  })
  const statusList = reactive([
    { value: 0, label: '全部' },
    { value: 2, label: '已支付' },
    { value: -1, label: '已取消' },
    { value: 1, label: '待支付' }
  ])
  onMounted(() => {
    getPage()
  })
  // 刷新
  const handleRefresh = () => {
    getPage()
  }
  // 列配置
  const columnOptions = [
    { label: 'ID', prop: 'id' },
    { label: '商品名称', prop: 'name' },
    { label: '支付金额', prop: 'amount' },
    { label: '数量', prop: 'num' },
    { label: '状态', prop: 'status' },
    { label: '备注', prop: 'note' },
    { label: '创建日期', prop: 'create_time' }
  ]
  // 动态列配置
  const { columnChecks, columns } = useCheckedColumns(() => [
    // { type: 'selection' }, // 勾选列
    // { type: 'expand', label: '展开', width: 80 }, // 展开列
    // { type: 'index', label: '序号', width: 80, align: 'center' }, // 序号列
    { prop: 'id', label: 'ID', align: 'center' },
    { prop: 'goods.goods_name', label: '商品名称' },
    {
      prop: 'goods.goods_cover',
      label: '商品封面',
      formatter: (row: any) => {
        return h(artImagePreview, { src: row.goods?.goods_cover })
      }
    },
    { prop: 'amount', label: '支付金额' },
    { prop: 'num', label: '数量' },
    { prop: 'address.name', label: '用户昵称' },
    { prop: 'address.address', label: '地址' },
    { prop: 'address.telephone', label: '手机号' },
    {
      prop: 'status',
      label: '状态',
      formatter: (row: any) => {
        return h(ElTag, { type: row.status === 2 ? 'success' : 'error' }, () => {
          return statusList.find((item) => item.value === row.status)?.label
        })
      }
    },
    { prop: 'note', label: '备注' },
    { prop: 'create_time', label: '创建日期', sortable: true }
  ])

  // 获取商品列表
  const getPage = async () => {
    loading.value = true
    const res = await OrderService.getOrderList(queryParams)
    total.value = res.data.total
    tableData.value = res.data.data
    loading.value = false
  }
</script>
